<template>
  <div
    class="t-gen-form"
    v-if="formConf"
  >
    <el-form
      ref="examFormRef"
      :disabled="formConf?.disabled"
      :label-position="formConf?.labelPosition"
      :label-width="formConf.labelWidth + 'px'"
      :model="formModel"
      :size="formConf.size"
      v-if="hiddenFormItemIds !== null"
    >
      <template
        v-for="(item, index) in formConf.fields"
        :key="index"
      >
        <div
          v-if="!hiddenFormItemIds.includes(item.vModel)"
          class="form-item"
          :class="currentItemId === item.vModel ? 'form-item-active' : ''"
          @click.stop="handleFormItemClick(item)"
        >
          <div class="item-seq-no">第 {{ index + 1 }} 题</div>
          <div class="form-item-wrap">
            <generate-form-item
              :cid="item.vModel"
              :index="index"
              :item="item"
              class="gen-form-item"
            />
            <!--   操作插槽-->
            <slot
              name="action"
              v-bind="{ item, index }"
            ></slot>
            <div
              v-if="item?.examConfig?.enableScore"
              class="result-icon"
            >
              <img
                v-if="correctOrErrorMap[item.vModel]"
                :src="correct"
                :alt="$t('form.exam.correct')"
              />
              <img
                v-if="correctOrErrorMap[item.vModel] === false"
                :src="error"
                :alt="$t('form.exam.wrong')"
              />
            </div>
          </div>

          <div
            class="answer-analysis"
            v-if="item.examConfig?.answerAnalysis"
          >
            <div class="mb5 ml5">{{ $t("form.exam.answerAnalysis") }}：</div>
            <div
              class="mb10 ml5"
              v-html="item.examConfig.answerAnalysis"
            ></div>
          </div>
        </div>
      </template>
    </el-form>
  </div>
</template>
<script setup lang="ts" name="ExamForm">
import { inject, onBeforeMount, provide, Ref, ref, watch } from "vue";
import GenerateFormItem from "@/views/formgen/components/GenerateForm/GenerateFormItem.vue";
import correct from "@/assets/images/exam/correct.svg";
import error from "@/assets/images/exam/error.svg";
import { getFormLogicRequest } from "@/api/project/form";
import { getHiddenFormItemIds } from "@/views/formgen/components/BizProjectForm/FormLogic";
import { useUserForm } from "@/views/formgen/components/GenerateForm/hooks/useUserForm";
import { FORM_DISABLED_KEY, USER_FORM_STATE_KEY } from "@/views/formgen/components/GenerateForm/types/constants";

const props = defineProps<{
  formConf: any;
  formModel: Record<string, any>;
  correctOrErrorMap: { [key: string]: boolean };
}>();

const userFormStore = useUserForm();

watch(
  () => props.formModel,
  newVal => {
    userFormStore.setFormModel(newVal);
  },
  {
    deep: true,
    immediate: true
  }
);

const currentItemId = ref<string>("");

const handleFormItemClick = (item: any) => {
  currentItemId.value = item.vModel;
};

const hiddenFormItemIds = ref<string[] | null>(null);

const formLogicData = inject<Ref<any> | null>("formLogicData", null);

onBeforeMount(async () => {
  let tempLogicData = formLogicData && formLogicData!.value;
  if (!tempLogicData) {
    const res = await getFormLogicRequest({ formKey: props.formConf.formKey });
    tempLogicData = res.data;
  }
  hiddenFormItemIds.value = getHiddenFormItemIds(props.formModel, tempLogicData, props.formConf.fields) || [];
});

provide(FORM_DISABLED_KEY, true);

provide(USER_FORM_STATE_KEY, userFormStore);

const examFormRef = ref<any>(null);

const scrollToField = (prop: string) => {
  examFormRef.value?.scrollToField(prop);
};

defineExpose({
  fields: props.formConf.fields,
  scrollToField
});
</script>

<style scoped lang="scss">
.t-gen-form {
  padding: 20px 40px;
}

.form-item {
  border-bottom: 1px dashed var(--el-border-color);
  margin-bottom: 20px;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    font-size: 14px;
    color: var(--el-text-color-primary);
    line-height: 28px;
    height: 28px;
  }
}

.result-icon {
  position: absolute;
  right: 0;
  top: 0;
}

.answer-analysis {
  color: var(--el-text-color-secondary);
  border-radius: 8px;
  padding: 20px;
  background-color: #ecf5f0;
}

.item-seq-no {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  color: var(--el-text-color-secondary);
}

.form-item-wrap {
  position: relative;
}

:deep(.form-item .el-form-item__label) {
  height: 100%;
}
</style>
